<template>
  <scroll-view scroll-y class="home">

    <!-- 轮播图 -->
    <view class="swiperDiv">
      <uni-swiper-dot
        class="uni-swiper-dot-box"
        :current="bannerCurrent"
        :dots-styles="dotsStyles"
        mode="round"
        field="content"
        :info="bannerList"
      >
        <swiper class="swiper" circular :autoplay="true" @change="bannerChange">
          <template>
            <swiper-item v-for="item in bannerList" :key="item.id">
              <image class="swiper-item" :src="item.imgUrl" />
            </swiper-item>
          </template>
        </swiper>
      </uni-swiper-dot>
    </view>
    <!-- 用户信息 -->
    <view class="homeUser">
      <view class="leftUser">
        <image v-if="userInfo.headPic" class="userHead" :src="userInfo.headPic" />
        <image v-else @click="handleLogin" class="userHead" :src="getStaticDir('/head.png')" />

        <view class="userInfo">
          <view v-if="userInfo.realNameLevel > 0" class="userName">{{ userInfo.realName }}</view>
          <view v-else-if="userInfo.realNameLevel == 0" class="userName"> 未实名 </view>
          <view v-else class="userName">游客</view>
          <view class="card">
            <view class="cardTitle">
              卡券：
            </view>
            <view class="cardNum">
              20
            </view>
            <view class="cardTitle">
              积分：
            </view>
            <view class="cardNum">
              370
            </view>
          </view>
        </view>
      </view>

      <view class="userBtn" @click="handleGet">
        提货
      </view>
    </view>
    <!-- 产品 -->
    <view class="serviceBox">
      <view class="serviceImgBox" @click="leftBtnClick">
        <image class="serviceImg" :src="getStaticDir('/left.jpg')" />
        <view class="serviceText">
          <view class="topText">
            <text>大金柜</text>
            <uni-icons class="arrow" type="right" size="14" color="#eee"></uni-icons>
          </view>
        </view>
      </view>
      <view class="serviceImgBox" @click="rightBtnClick">
        <image class="serviceImg" :src="getStaticDir('/right.jpg')" />
        <view class="serviceText">
          <view class="topText">
            <text>小金柜</text>
            <uni-icons class="arrow" type="right" size="14" color="#eee"></uni-icons>
          </view>
        </view>
      </view>
    </view>
    <!-- 品牌 -->
    <view class="contentDiv">
      <text class="contentTitle">品牌介绍</text>
      <image class="contentImg" :src="getStaticDir('/banner.jpg')" />
      <view class="contentInfo">
        珍错房成立于XXXX年，秉持着XX核心理念，致力于为每一位顾客提供最优质的产品服务。自成立以来，珍错房一直专注于传承与创新，将传统的XX与现代XX设计理念相结合，打造出一系列既保留经典韵味又符合当代审美和需求的产品。
      </view>
    </view>
    <a-modal
      v-model="logInModal"
      content="请先完成登录"
      :show-title="false"
      show-cancel-button
      confirm-text="去登录"
      :content-style="{ fontSize: '32rpx', color: '#000000' }"
      @confirm="logInConfirm"
      @cancel="loginCancel"
    >
    </a-modal>
  </scroll-view>
</template>

<script>
import { goodsList } from '@/api/shop';
import { TOKEN } from '@/config/config';
export default {
  data() {
    return {
      bannerList: [
        {
          imgUrl: this.staticDir + '/swipe.png',
          id: 0
        },
        {
          imgUrl: this.staticDir + '/swipe.jpeg',
          id: 1
        }
      ],
      bannerCurrent: 0,
      dotsStyles: {
        width: 10,
        backgroundColor: 'rgba(255, 255, 255, 0.3)',
        border: '0px rgba(255, 255, 255, 0.3) solid',
        color: '#fff',
        bottom: '16px',
        selectedBackgroundColor: 'rgba(255, 255, 255, 1)',
        selectedBorder: '0px rgba(255, 255, 255, 1) solid'
      },
      // 用户信息
      userInfo: {
        headPic: '',
        realNameLevel: -1,
        realName: ''
      },
      logInModal: false
    };
  },
  methods: {
    bannerChange(e) {
      this.bannerCurrent = e.detail.current;
    },
    // 提货
    handleGet() {
      uni.navigateTo({
        url: '/pages/card/coupon/coupon'
      });
    },
    leftBtnClick() {
      uni.navigateTo({
        url: '/pages/shop/detail/detail?type=big'
      });
    },
    rightBtnClick() {
      uni.navigateTo({
        url: '/pages/shop/detail/detail?type=small'
      });
    },
    // 登录
    handleLogin() {
      if (uni.getStorageSync(TOKEN)) {
        uni.switchTab({
          url: '/pages/index/mine/index'
        });
        return;
      }
      this.logInModal = true;
    },
    logInConfirm() {
      uni.navigateTo({
        url: '/pages/login/login'
      });
    },
    loginCancel() {
      this.logInModal = false;
    }
  },
  computed: {

  },
  watch: {

  },
  // 页面周期函数--监听页面加载
  onLoad() {
    goodsList().then(res => {

    });
  },
  // 页面周期函数--监听页面初次渲染完成
  onReady() {},
  // 页面周期函数--监听页面显示
  onShow() {},
  // 页面周期函数--监听页面隐藏
  onHide() {},
  // 页面周期函数--监听页面卸载
  onUnload() {},
  // 页面处理函数--监听用户下拉动作
  onPullDownRefresh() {},
  // 页面上拉触底事件的处理函数
  onReachBottom() {},
  // 用户点击右上角分享
  onShareAppMessage() {},
  // 页面处理函数--监听页面滚动(not-nvue)
  onPageScroll(e) {}
};
</script>

<style lang="scss" scoped>
.home {
  width: 100vw;
  position: relative;
  @import './index.scss';
  //  height: calc(100vh - 100rpx - env(safe-area-inset-bottom) - env(safe-area-inset-top));
  .scrollView {
    height: 100%;
    background-color: #fff;
    // padding-bottom:40rpx;
  }
}
</style>
